import { useEffect, useRef, useState } from 'react'
import ThreeTools from "./utils/ThreeTools"
import './App.css'

function App() {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const threeToolsRef = useRef<ThreeTools | null>(null);
  const [loading, setLoading] = useState(true);
  const [loadingProgress, setLoadingProgress] = useState(0);

  useEffect(() => {
    if (canvasRef.current) {
      threeToolsRef.current = new ThreeTools(canvasRef.current, {
        onLoadProgress: (progress) => {
          setLoadingProgress(progress.progress);
        },
        onLoadComplete: () => {
          setLoading(false);
        }
      });
      // 初始化时加载默认环境贴图
      // threeToolsRef.current.createEnvironmentMap(selectedImage);

      // 添加一个平面作为地面
      threeToolsRef.current.addCube({
        color: 0x808080,
        width: 20,
        height: 0.1,
        depth: 20,
        position: { x: 0, y: -0.05, z: 0 }
      });
      return () => {
        // 清理代码
      };
    }
  }, []);

  return (
    <>
      {loading && (
        <div className="loading-overlay">
          <div className="loading-content">
            <div className="loading-progress">
              <div 
                className="loading-bar"
                style={{ width: `${loadingProgress}%` }}
              />
            </div>
            <div className="loading-text">
              Loading... {Math.round(loadingProgress)}%
            </div>
          </div>
        </div>
      )}
      <div className="three-container">
        <canvas ref={canvasRef} style={{ width: '100vw', height: '100vh' }}></canvas>
        <div className="controls" style={{ position: 'absolute', top: '20px', left: '20px', background: 'rgba(255,255,255,0.7)', padding: '10px' }}>
          {/* <div className="control-group">
            <label>环境强度:</label>
            <input
              type="range"
              min="0"
              max="2"
              step="0.1"
              value={intensity}
              onChange={handleIntensityChange}
            />
            <span>{intensity.toFixed(1)}</span>
          </div> */}
          
          {/* <div className="control-group">
            <label>环境贴图:</label>
            <select value={selectedImage} onChange={handleEnvironmentMapChange}>
              <option value="/src/assets/bgc.jpg">默认环境</option>
              <option value="/src/assets/env1.jpg">环境 1</option>
              <option value="/src/assets/env2.jpg">环境 2</option>
            </select>
            <button onClick={handleRemoveEnvironmentMap}>移除环境贴图</button>
          </div> */}
        </div>
      </div>
    </>
  )
}

export default App
